<template>
    <div>
        <h1>
            <b class="el-icon-shopping-cart-2"></b>
            <span>我的购物车</span>
            <small
                >温馨提示：产品是否购买成功，以最终下单为基准，请尽快结算</small
            >
        </h1>
        <div class="main">
            <table>
                <tr>
                    <th width="120px">
                        <input type="checkbox" v-model="checked" />全选
                    </th>
                    <th width="640px">商品名称</th>
                    <th width="160px">单价</th>
                    <th width="200px">数量</th>
                    <th width="120px">操作</th>
                </tr>
                <tr
                    height="120px"
                    v-for="item in $store.state.shoplist"
                    :key="item.product_id"
                >
                    <td width="120px">
                        <input
                            type="checkbox"
                            class="check"
                            @click="select(item)"
                            v-model="item.choose"
                        />
                    </td>
                    <td class="shop" align="left" width="640px">
                        <div class="left">
                            <el-image
                                lazy-load
                                :src="
                                    'http://47.115.85.237:3000/' +
                                        item.product_picture
                                "
                            />
                        </div>
                        <div class="right">{{ item.product_name }}</div>
                    </td>
                    <td width="160px">
                        <span>{{ item.product_selling_price }}元</span>
                    </td>
                    <td width="200px">
                        <van-stepper
                            v-model="item.num"
                            :name="item.product_id"
                            @change="change"
                        />
                    </td>
                    <td width="120px">
                        <i
                            class="el-icon-circle-close"
                            @click="remove(item)"
                        ></i>
                    </td>
                </tr>
                <!-- </van-checkbox-group> -->
            </table>

            <div class="foot">
                <p>
                    <span @click="to">继续购物</span>
                    <b>合计：<big>{{ allprice }}元</big></b>
                    <button>去结算</button>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            //步进器的初始数值
            value: 1,
            result: [],
        };
    },
    mounted() {
        this.result = this.$store.state.shoplist;
    },
    //监听属性  监听价格变化
    computed: {
        allprice() {
            let sum = 0;
            this.result.forEach((item) => {
                sum += item.product_selling_price * item.num;
            });
            return sum;
        },
        checked: {
            get() {
                return this.$store.state.shoplist.every((element) => {
                    return element.choose == true;
                });
            },
            set(newVal) {
                this.$store.commit("allChoose", newVal);
            },
        },
    },
    methods: {
        to(){
            this.$router.push('/allshop')
        },
        // 当点击步进器时，改变商品数量
        change(val, detail) {
            this.$store.commit("change", { num: val, id: detail.name });
            // 若要传递多个参数，必须是对象形式，否则传不过去
        },
        //在购物车页面写   删除单个商品
        remove(item) {
            this.$store.commit("remove", item);
            this.select();
        },
        // 全选事件
        select(item) {
            this.$store.commit("change", item);
        },
         select(val) {
             if (
                 this.$store.state.shoplist.length == this.result.length &&
                 this.$store.state.shoplist.length != 0
            ) {
                 this.checked = true;
            } else {
               this.checked = false;
             }
         },
        //  全选的反选
         changeall() {
             this.$refs.checkboxGroup.toggleAll(this.checked);
         },
    },
};
</script>

<style lang="scss" scoped>
h1 {
    width: 100%;
    border-bottom: 3px solid orangered;
    b {
        font-size: 36px;
        color: orangered;
    }
    span {
        font-size: 40px;
    }
    small {
        font-weight: 400;
    }
}
.main {
    width: 100%;
    table {
        width: 1200px;
        background-color: #ece9e9;
        border-collapse: separate;
        border-spacing: 0px 2px;
        margin: 0 auto;
        text-align: center;
        .van-checkbox-group {
            width: 100px;
        }
        tr {
            margin-bottom: 5px;
            background-color: #fff;
            .shop {
                display: flex;
                .el-image {
                    width: 120px;
                    height: 120px;
                }
                .right {
                    height: 120px;
                    line-height: 120px;
                }
            }
        }
    }
}
.foot{
    width: 1400px;
    height: 40px;
    margin: 0 auto;
    line-height: 40px;
    p{
        display: flex;
    }
    span{
        flex: 5;
    }
    b{
        flex: 1;
        color: orangered;
    }
    button{
        flex: 1;
        width: 80px;
        height: 40px;
        color: #fff;
        background-color: orange;
        border: none;
    }
}
</style>
